<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.outer {
				position: absolute;
				width: 200px;
				height: 200px;
				-o-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
				clip: rect(0px, 200px, 100px, 0px);
				/* 这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
				border-radius: 100px;
				background-color: red;
				/*-webkit-animation: an1 2s infinite linear;*/
			}
			
			.pie {
				position: absolute;
				width: 200px;
				height: 200px;
				transform: rotate(-90deg);
				clip: rect(0px, 200px, 100px, 0px);
				border-radius: 100px;
				background-color: yellow;
				/*-webkit-animation: an2 2s infinite linear;*/
			}
			.ct{
			position: absolute;
			width: 200px;
			height: 200px;
			}
			
			@-webkit-keyframes an1 {
				0% {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(90deg);
				}
				100% {
					transform: rotate(0deg);
				}
			}
			
			@-webkit-keyframes an2 {
				0% {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(-90deg);
				}
				100% {
					transform: rotate(0deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="ct" id="ctx">
			<div class="outer"></div>
			<div class="pie"></div>
		</div>
	</body>
	<script type="text/javascript">
		var left = 0;
		var ctx = document.getElementById("ctx");

//		setInterval(function() {
//			left += 10;
//			if(left > 400) {
//				left = 0;
//			}
//			ctx.style.left = left + "px";
//		}, 1000);
	</script>

</html>